<template>
  <el-col :span="6">
    <el-card>
      <div class="card-icon-container">
        <slot name="icon"></slot>
      </div>
      <div class="card-desc">
        <div class="card-title">
          <slot name="title"></slot>
        </div>
        <div class="card-count">
          <slot name="count"></slot>
        </div>
      </div>
    </el-card>
  </el-col>
</template>

<style lang="scss" scoped>
.card-icon-container {
  display: inline-block;
  font-size: 3rem;
}

.area-wrapper {
  display: flex;
  justify-content: center;
}

.card-desc {
  font-weight: bold;
  float: right;
}

.card-title {
  margin-top: 0.3rem;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 1rem;
}

.card-count {
  margin-top: 0.75rem;
  color: #666;
  font-size: 1.25rem;
}
</style>